<template>
    <div>
        <el-container>
            <el-header style="height:40px">
                <div class="divToolbar clearfix">
                    <div class="container clearfix">
                        <div class="divLogoImg pull-left">
                            <img src="../assets/logo.png" alt="">
                        </div>
                        <div class="divLoginTitle pull-left">
                            中科视频监控平台
                        </div>
                        
                    </div>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
                        <el-menu-item index="account"><i class="fa fa-user-o"></i> 账号管理</el-menu-item>
                        <el-menu-item index="schedule"><i class="fa fa-feed"></i> 计划编组</el-menu-item>
                        <el-menu-item index="terminal"><i class="fa fa-feed"></i> 在线终端</el-menu-item>
                        <el-menu-item index="monitor"><i class="fa fa-tv"></i> 运行监控</el-menu-item> 
                    </el-menu>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                activeIndex:"account"
            } 

        },
        methods:{
            handleSelect(){

            }
        }
    }
</script>

<style lang="less" scoped>
    .el-header{
        position: fixed;
        width: 100%;
        z-index: 99;
        background-color: #fff;

        padding: 0px 0px;

        .divToolbar{
            position: relative;
        }

        .el-menu{
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%);
            background-color: transparent;
            border: 0px;

            .el-menu.el-menu--horizontal {
                border: 0px;
            }
            .el-menu-item {
                height: 40px;
                line-height: 40px;
            }
        }
    }

    .divLogoImg{
        img{
            height: 40px;
            line-height: 40px;
            padding: 5px;
        }
    }
    .divLoginTitle{
        height: 40px;
        line-height: 40px;
        padding: 0px 10px;
        font-weight: bold;
        font-size: 1.1em;
    }

    .el-main{
        padding-top: 60px;
    }
</style>